import { defineView } from "./tools.mjs";

/**
 * @param {DefineRoute[]} indexRoute
 * @returns {Ctor}
 */
function generateIndexRoute(indexRoute) {
  return class {
    _$inject = ["$scope"];

    /**
     * @type {string[]}
     */
    vr = [];

    /**
     * @param {ng.IScope} $scope
     */
    constructor($scope) {
      this.$scope = $scope;
    }

    $onInit() {
      this.vr = indexRoute.map((r) => r.name);
    }
  };
}

/**
 * @typedef {{ overrideRouteOption?: DefineView; overrideViewClass?: string}} OverrideOption
 * @param {DefineRoute[]} indexRoute
 * @param {OverrideOption=} option
 * @returns {DefineView}
 */
export function defineIndexRouteView(
  indexRoute,
  { overrideRouteOption = {}, overrideViewClass } = {},
) {
  return /* #__PURE__ */ defineView({
    /**
     * @type {DefineView}
     */

    // eslint-disable-next-line no-warning-comments
    // @ts-ignore
    controller: class IndexRouteViewController extends generateIndexRoute(
      indexRoute,
    ) {
      /**
       * @override
       */
      static $inject = super._$inject;

      overrideViewClass = overrideViewClass ?? "";
    },
    controllerAs: "$ctrl",
    template: /* HTML */ html`
      <nav class="main-nav">
        <div ng-repeat="r in $ctrl.vr" class="h-max">
          <a ui-sref="{{ r }}" ui-sref-active="active"> {{ r }} </a>
        </div>
      </nav>
      <!-- sub-view -->
      <ui-view
        ng-class="{ [$ctrl.overrideViewClass]: !!$ctrl.overrideViewClass }"
      ></ui-view>
    `,

    ...overrideRouteOption,
  });
}
